<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn">点击</button>
</body>
<script>
    // 计时器: 每隔固定时间,执行传入的函数  => 只要不清除计时器,一直执行
    // 延时器: 延迟一定的时间,执行传入的函数  => 只执行一次就结束了

    // 设置延时器
    // setTimeout(fn,timeout,arg1,arg2...argN)
    // fn     需要执行的函数
    // timeout  延迟的事件(ms)
    // arg1,arg2...argN   如果函数需要接收参数,从第三参数开始依次向后传

    // 返回值: 延时器的编号

    // 清除延时器
    // clearTimeout(延时器的编号)


    // setTimeout(function () {
    //     console.log(1111);
    // }, 1000)

    // 防抖
    // 需求: 在指定时间内,重复触发事件 => 只执行最后一次
    var btn = document.getElementsByClassName("btn")[0];
    var timer = null;
    btn.onclick = function () {
        clearTimeout(timer);  // 如果300ms连续触发 => 先清除上一个再启动下一个
        timer = setTimeout(function () { // 从延时器启动到函数执行需要(300ms)
            console.log(1111);
        }, 300);
    }







</script>

</html>